<template>
	<view style="min-height: 1300rpx;background-color:  #F5F5F5;padding-bottom: 20rpx ;">
		<u-navbar :back-icon-color='color' title='合作伙伴' :is-back="true" title-bold :background="{
			background: 'rgb(254,206,6)'
		}" :border-bottom="false">
		</u-navbar>
		<view class="carp_top">
			<view style="display: flex;">
				<image class="img" src="https://s4.ax1x.com/2022/01/27/7XQsQe.jpg" />
				<view class="carp_top_1">
					<text>艾利克斯</text>
					<text>课程顾问</text>
				</view>
			</view>
			<view class="carp_top_2">
				<view class="carp_top_2_2">
					<text>100</text>
					<text>累计客户(人)</text>
				</view>
				<view class="carp_top_2_3">

				</view>
				<view class="carp_top_2_2">
					<text>26</text>
					<text>绑定客户(人)</text>
				</view>
			</view>
		</view>
		<view class="carp" v-for="(item,index) in list" :style="{
			'margin-top':index==0? '130rpx':'20rpx'
		}">
			<text class="bt">{{item.name}}</text>
			<view style="display: flex;
			margin-top: 20rpx;
			flex-wrap: wrap;">
				<view class="carp_1" 
				@click="submit(items.text)"
				v-for="(items,index) in item.childern">
					<image :src="items.img" />
					<text>{{items.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '去推广',
						childern: [{
								text: '推广店铺',
								img: require('@/static/img/tuikiuang.png')
							},
							{
								text: '推广商品',
								img: require('@/static/img/sp1.png')
							},
							{
								text: '客户足迹',
								img: require('@/static/img/zj11.png')
							}

						]
					},
					{
						name: '去推广',
						childern: [{
							text: '邀请',
							img: require('@/static/img/qt12.png')
						}, ]
					},
					{
						name: '管理系统',
						childern: [{
							text: '交互中心',
							img: require('@/static/img/glxt.png')
						}, ]
					}

				],

			};
		},
		methods:{
			submit(a){
				if(a=='推广商品'){
					uni.navigateTo({
						url:'./tgsp'
					})
				}else if(a=='客户足迹'){
					uni.navigateTo({
						url:'./khzj'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.carp {
		padding: 30rpx 30rpx 10rpx 30rpx;
		background-color: white;
		border-radius: 8rpx;
		width: 92%;
		margin: 20rpx auto;

		.carp_1 {
			width: 25%;
			margin-bottom: 20rpx;
			text-align: center;

			image {
				width: 70rpx;
				height: 70rpx;
			}

			text {
				display: block;
				margin-top: 10rpx;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #141414;
				opacity: 1;
			}
		}

		.bt {
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #141414;
			opacity: 1;
		}
	}

	.carp_top {
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 80rpx;
		height: 310rpx;
		background-color: rgb(254, 206, 6);

		.carp_top_2 {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 180rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url('https://s4.ax1x.com/2022/02/10/HtiYPe.png');

			.carp_top_2_2 {
				text-align: center;

				text:nth-of-type(2) {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #141414;
					display: flex;
					justify-content: center;
					display: block;
					opacity: 0.6;
				}

				text:nth-of-type(1) {
					display: block;
					font-size: 42rpx;
					font-family: HarmonyOS Sans;
					font-weight: bold;
					color: #141414;
					opacity: 1;
				}
			}

			.carp_top_2_3 {
				width: 2rpx;
				height: 74rpx;
				background: #141414;
				opacity: 0.1;
				border-radius: 0px;

			}
		}

		.carp_top_1 {
			margin-left: 20rpx;

			text:nth-of-type(1) {
				font-size: 42rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				opacity: 1;
			}

			text:nth-of-type(2) {
				margin-top: 10rpx;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #F1D19E;
				opacity: 1;
				width: 120rpx;
				height: 42rpx;
				background: linear-gradient(180deg, #4D4C4A 0%, #333333 100%);
				text-align: center;
				line-height: 42rpx;
				opacity: 1;
				border-radius: 4rpx;

			}

			text {
				display: block;
			}
		}

		.img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 100%;
		}
	}
</style>
